<template>
  <div class="right-col">
    <div class="top-cell">
      <DCard title="负荷功率">
        <div class="count-static">
          <div class="item">
            <div class="label">负荷有功功率：</div>
            <div class="value"><CountUpVue :end-val="value1" /> MW</div>
          </div>
          <div class="item">
            <div class="label">负荷无功功率：</div>
            <div class="value"><CountUpVue :end-val="value2" /> Mvar</div>
          </div>
        </div>
      </DCard>
    </div>
    <div class="bottom-cell">
      <DCard title="送端换流站功率占比">
        <div class="chart">
          <PieChart :options="pieOptions" />
        </div>
      </DCard>
    </div>
  </div>
</template>

<script setup name="RightCol">
import DCard from '@/components/DCard.vue'
import PieChart from '@/components/Charts/PieChart.vue'
import CountUpVue from '@/components/CountUpVue/index.vue'
import { randomLenNum } from '@/utils/index.js'
import { getZyFhglSdhlzb } from '@/api/base.js'

import useAppStore from '@/store/modules/app'
const appStore = useAppStore()

const value1 = ref(0)
const value2 = ref(0)
const pieOptions = ref({})

const init = () => {
  // 模拟接口获取数据
  const time = appStore.timePoint

  getZyFhglSdhlzb({ time: time }).then(res => {
    if (res.code == '0000') {
      value1.value = res.data.value1
      value2.value = res.data.value2
      pieOptions.value = res.data.pieOptions
    }
  })
  // value1.value = randomLenNum(3)
  // value2.value = randomLenNum(3)

  // pieOptions.value = {
  //   title: '送端换流站功率占比',
  //   label: '送端换流站功率占比',
  //   total: 70,
  //   data: [
  //     { name: '送端换流站1有功', value: 23 },
  //     { name: '送端换流站2有功', value: 27 },
  //     { name: '送端换流站3有功', value: 20 }
  //   ]
  // }
}

init()

watch(
  () => appStore.timePoint,
  () => {
    init()
  }
)
</script>

<style lang="scss" scoped>
.right-col {
  width: 100%;
  height: 100%;

  .top-cell {
    width: 100%;
    height: 50%;

    .count-static {
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding: 20px;
    }

    .item {
      display: flex;
      justify-content: space-between;
      font-size: 24px;
    }
  }

  .bottom-cell {
    width: 100%;
    height: 50%;

    .chart {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
